<template>
  <div class="com-show">
    <p class="com-show-title"><router-link :target="global.goBookDetailType" :to="'/index/bookDetail?id='+(books[0]?books[0].bookId:'')">{{books[0]?books[0].bookName:''}}</router-link></p>
    <p class="com-show-sub">
      <span class="com-show-span"><router-link :target="global.goBookDetailType" :to="'/index/bookDetail?id='+(books[1]?books[1].bookId:'')">{{books[1]?books[1].bookName:''}}</router-link></span>
      <span class="com-show-span"><router-link :target="global.goBookDetailType" :to="'/index/bookDetail?id='+(books[2]?books[2].bookId:'')">{{books[2]?books[2].bookName:''}}</router-link></span>
    </p>
    <p class="com-show-sub">
      <span class="com-show-span"><router-link :target="global.goBookDetailType" :to="'/index/bookDetail?id='+(books[3]?books[3].bookId:'')">{{books[3]?books[3].bookName:''}}</router-link></span>
      <span class="com-show-span"><router-link :target="global.goBookDetailType" :to="'/index/bookDetail?id='+(books[4]?books[4].bookId:'')">{{books[4]?books[4].bookName:''}}</router-link></span>
    </p>
  </div>
</template>

<script>
export default {
  props:{
    books:Array
  },
}
</script>

<style lang='scss' scoped>
.com-show {
  padding-bottom: 10px;
  border: 1px dotted #EAE6E2;
  border-width: 0 0 2px 0;

  .com-show-title a{
    color: $base-color;
    font-weight: bold;
  }

  .com-show-sub {
    .com-show-span {
      display: inline-block;
      width: 50%;
    }
  }
}
</style>